@import './prism-theme.sass'

body
  background-color: $grey-1

ul
  margin: 0 0 16px

.bg-code
  background-color: $code-color

.doc-token
  white-space: nowrap
  display: inline-block
  padding: 2px 4px
  line-height: 1
  border: 1px solid $grey-5
  border-radius: 5px
  font-family: inherit
  background-color: #fff

blockquote .doc-token
  background: scale-color($grey, $lightness: 60%)
  color: $grey-9

.doc-note
  background-color: $grey-3
  border-radius: $generic-border-radius
  margin: 16px 0
  padding: 16px 24px
  font-size: 1em
  border-width: 0 5px
  border-style: solid
  border-color: $grey
  letter-spacing: .5px

  .doc-token
    color: #000

  > p, > ul
    margin-bottom: 0

  &--tip
    background-color: scale-color($positive, $lightness: 75%)
    border-color: $positive
    .doc-token
      border-width: 0
      color: #fff
      background: $positive
    .doc-link
      color: scale-color($positive, $lightness: -35%)

  &--warning
    background-color: scale-color($warning, $lightness: 50%)
    border-color: $warning
    .doc-token
      border-width: 0
      background: $warning
    .doc-link
      color: scale-color($warning, $lightness: -45%)

  &--danger
    background-color: scale-color($negative, $lightness: 80%)
    border-color: $negative
    .doc-token
      border-width: 0
      color: #fff
      background: $negative
    .doc-link
      color: scale-color($negative, $lightness: -25%)

  &__title
    font-weight: 500

.doc-heading
  color: $primary
  cursor: pointer

  &:after
    content: ' #'
    opacity: 0
  &:hover:after
    opacity: 1

.doc-h1
  font-size: 2rem
  line-height: 2rem
  padding: 1rem 0
  font-weight: 500
  margin: 0 0 2rem

.doc-h2
  font-size: 1.5rem
  line-height: 1.5rem
  padding: 0.5rem 0
  font-weight: 500
  border-bottom: 1px solid #ccc
  margin: 4rem 0 1.5rem

.doc-h3
  font-size: 1.1rem
  line-height: 1.1rem
  padding: 0.45rem 0
  margin: 2rem 0 1rem

.doc-h4
  font-size: 1rem
  line-height: 1rem
  padding: 0.25rem 0
  margin: 1.5rem 0

.doc-h5
  font-size: 0.9rem
  margin: 1.5rem 0

.doc-h6
  font-size: 0.8rem
  margin: 1.5rem 0

.doc-img
  max-width: 100%

.doc-page-listing
  .q-icon
    font-size: 20px
    margin-right: 8px
    color: $primary

kbd
  white-space: nowrap
  display: inline-block
  padding: 2px 4px
  text-transform: uppercase
  line-height: 1
  border: 1px solid rgba(0,0,0,.12)
  border-radius: 5px
  color: #fff
  background-color: $grey-7
  box-shadow: $shadow-2

.doc-gdpr
  max-width: 360px

.q-page > .q-badge + .doc-example
  margin-top: 0

body.q-scroll--lock .q-page
  > *
    overflow-anchor: none

  > .q-scroll--anchor
    overflow-anchor: auto
